<template>
	<div class="Room" ref="room">
		<div class="room-left">
			<img :src="user.avatar" alt />
			<p v-for="(item,index) in iconList" :key="index" :class="[item,{active:iconCurrentIndex === index}]" class="iconfont"></p>
		</div>
		<div class="room-center">
			<div class="center-h">
				<p>当前用户列表</p>
				<p />
			</div>
			<div class="center-b">
				<ul>
					<li class="user-item" v-for="(item,index) in userList" :key="index">
						<img :src="item.avatar" alt />
						<span>{{item.username}}</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="room-right">
			<!-- 标题     -->
			<p class="name">weChat ({{userListLength}})</p>
			<div class="chatcontent">
				<ul class="join" ref="joinUs">
					<li v-for="(item, index) in joinRoom" :key="index">欢迎{{item.username}}加入群聊</li>
					<!-- 对话框 -->
					<!-- <li
            v-for="(item,index) in messageContent"
        
            :class="{'my-message': item.username ===  ? true: false,'other-message': item.type === 2 ? true : false }"
          > -->
					<li v-for="(item,index) in messageContent">
						<!-- 离开 -->
						<div v-if="item.type === 3">
							{{item.username}}离开了群聊
						</div>

						<div class="my-message" v-if="item.username === user.username ">
							<div class='my-message-text' v-if="item.type === 'txt' " >
								<span>{{item.content}}</span>
								<img :src="item.avatar" alt="" class="avatar">
							</div>
							
							
							<div class="message-img" v-if="item.type === 'img' ">
								<img :src="item.img" alt="" class="file">
								<img :src="item.avatar" alt="" class="avatar">
							</div>
							
						</div>

						<div class="other-message" v-if="item.username !== user.username && item.type !== 3">
							<div class="other-message-text" v-if="item.type === 'txt' ">
								<img :src="item.avatar" alt="" class="avatar">
								<p class="username">{{item.username}}</p>
								<p class="content">{{item.content}}</p>
							</div>
							<div v-if="item.type === 'img' ">
							    <img :src="item.avatar" alt="" class="avatar">
							    <p class="username">{{item.username}}</p>
							    <img :src="item.img" alt="" class="file">
							</div>
						</div>

					</li>
					<!-- 
          <li class="my-message">
            <div class="my-message-text">
              <span>123</span>
              <img src="../assets/images/avatar09.jpg" alt="" class="avatar">
            </div>
          </li>
          <li class="my-message">
            <div class="message-img">
              <img src="../assets/images/avatar05.jpg" alt="" class="file">
              <img src="../assets/images/avatar09.jpg" alt="" class="avatar">
            </div>
          </li>
          <li class="other-message">
            <div class="other-message-text">
              <img src="../assets/images/avatar04.jpg" alt="" class="avatar">
              <p class="username">123</p>
              <p class="content">456</p>
            </div>
          </li>
          <li class="other-message">
            <div>
              <img src="../assets/images/avatar04.jpg" alt="" class="avatar">
              <p class="username">123</p>
              <img src="../assets/images/avatar04.jpg" alt="" class="file">
            </div>
          </li> -->
				</ul>
			</div>

			<!--  消息框    -->
			<div class="sendMessage">
				<div class="icon">
					<span class="iconfont icon-smile" @click="emojiShow = !emojiShow"></span>
					<div class="emoji" tabindex="1" v-show="emojiShow">
						<span v-for="item in emojiList" :key="item.codes" @click="emojiChecked(item)">{{item.char}}</span>
					</div>
					<label class="iconfont icon-wenjianjia" for="file"></label>
					<input type="file" style="display:none" id="file" @change="upload" />
					<span class="iconfont icon-jietu"></span>
				</div>
				<textarea v-model="inputContent" cols="80" rows="5" ref="textarea" @keyup.enter="send"></textarea>
				<!-- <div v-if="imgUrl">
					<img :src="imgUrl" alt />
				</div> -->
				<van-button  type="default" @click="send" class="sendBtn">发送</van-button>
				
			</div>
		</div>
	</div>
</template>

<script>
	// import html2canvas from 'html2canvas'
	import {
		Toast,
		Button
	} from 'vant';
	import emoji from '../assets/emoji'
	export default {
		name: 'Room',
		components: {
			[Button.name]: Button
		},
		props: {
			user: Object,
			userList: Array,
			message: Object,
			messageContent: Array, // 0不渲染 1、自己发的消息 2、别人发的消息 3、离开房间
		},
		data() {
			return {
				iconList: ['icon-liaotianqingqiu', 'icon-yonghu'],
				iconCurrentIndex: 0,
				emojiList: [],
				emojiShow: false,
				inputContent: '',
				// messageContent: [], // 0不渲染 1、自己发的消息 2、别人发的消息 3、离开房间
				joinRoom: [],
				imgUrl: ''
			}
		},
		created() {
			this.emojiList = emoji;
			// 谁加入聊天室
			this.joinRoom = this.$store.state.user.joinRoom;
		},
		computed: {
			userListLength() {
				return this.userList.length;
			},

		},
		methods: {
			// test(){
			// 	console.log(123);
			// },
			upload(e) {
				const file = e.target.files[0]
				const reader = new FileReader() // 创建读取文件对象
				reader.readAsDataURL(file) // 发起异步请求，读取文件
				reader.onload = (e) => {
					// 文件读取完成后
					// 读取完成后，将结果赋值给img的src
					this.imgUrl = e.target.result;
					this.$emit('upload', e.target.result)
				}
			},
			handleScrollBottom() {
				const ul = this.$refs.joinUs
				ul.scrollTop = ul.scrollHeight
				console.log(ul.scrollTop);
			},
			// 发送消息
			send() {
				if (!this.inputContent) {
					Toast('请输入聊天信息');
					return;
				}
				let content = this.inputContent.trim();
				this.inputContent = '';
				// 发送
				const username = this.user.username;
				const avatar = this.user.avatar;
				let data = {
					content,
					username,
					avatar
				}
				this.$emit('sendMessage', data)
			},
			// 选择表情包
			emojiChecked(item) {
				console.log(item);
			},
			// 用户离开
			haveOneLeaveRoom() {
				const leaveRoom = this.$store.state.user.leaveRoom;
				this.messageContent.push({ ...leaveRoom,
					type: 3
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../assets/css/iconfont.css';
	.sendBtn{
		position: absolute;
		right: 10px;
		bottom: 10px;
	}
	.Room {
		width: 900px;
		height: 500px;
		margin: auto;
		display: flex;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);

		.room-left {
			flex-shrink: 0;
			background-color: #474574;
			width: 56px;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 16px;
			color: #999999;

			.icon-liaotianqingqiu,
			.icon-yonghu {
				font-size: 24px;
				padding-top: 16px;
				cursor: pointer;
			}

			.active {
				color: #ecf0f1;
			}

			img {
				width: 40px;
				height: 40px;
				border-radius: 6px;
			}
		}

		.room-center {
			flex-shrink: 0;
			width: 200px;
			background-color: #e6e5e5;
			color: #000;
			display: flex;
			flex-direction: column;

			.center-h {
				padding: 9.6px 10px;
				height: 20px;
				border-bottom: 1px solid #e5e5e58c;
				box-shadow: 1px 1px 1px #b2c0c9;
				display: flex;
				align-items: center;

				img {
					width: 50px;
					height: 50px;
				}

				p {
					font-size: 15px;
				}
			}

			.center-b {
				flex: 1;

				.user-item-name {
					padding: 5px 10px;
					height: 40px;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #e5e5e58c;
					box-shadow: 1px 1px 1px #2980b9;
					font-size: 17px;
				}

				.user-item {
					padding: 10px 10px;
					height: 40px;
					display: flex;
					align-items: center;

					img {
						width: 40px;
						height: 40px;
					}

					span {
						margin-left: 5px;
					}
				}
			}
		}

		.room-right {
			flex: 1;
			background-color: #f6f6f6;
			display: flex;
			flex-direction: column;

			.name {
				display: flex;
				justify-content: center;
				line-height: 40px;
				font-size: 16px;
				border-bottom: 1px solid rgba(100, 100, 100, 0.3);
			}

			.chatcontent {
				height: 300px;

				.join {
					text-align: center;
					color: #ccc;
					overflow: auto;
					height: 300px;

					li {
						padding: 10px;
					}
				}

				.my-message {
					display: flex;
					justify-content: flex-end;

					.my-message-text {
						&::after {
							content: '';
							right: 38px;
							top: 50%;
							transform: translateY(-50%);
							position: absolute;
							border-left: 6px solid #9eea6a;
							border-top: 6px solid transparent;
							border-bottom: 6px solid transparent;
							border-right: 6px solid transparent;
						}
					}

					div {
						display: flex;
						position: relative;

						.file {
							max-width: 330px;
							max-height: 170px;
							margin-right: 10px;
							cursor: pointer;
							border-radius: 5px;
						}

						.avatar {
							width: 40px;
							height: 40px;
							border-radius: 6px;
						}

						span {
							box-sizing: border-box;
							display: inline-block;
							border-radius: 5px;
							line-height: 32px;
							background-color: #9eea6a;
							color: #000;
							padding: 5px;
							margin-right: 10px;
							min-width: 40px;
						}
					}
				}

				.other-message {
					position: relative;
					display: flex;
					justify-content: flex-start;

					.other-message-text {
						&::before {
							content: '';
							left: 40px;
							top: 55%;
							transform: translateY(-50%);
							position: absolute;
							border-left: 5px solid transparent;
							border-top: 5px solid transparent;
							border-bottom: 5px solid transparent;
							border-right: 5px solid #ffffff;
						}
					}

					div {
						display: flex;
						position: relative;

						.file {
							max-width: 330px;
							max-height: 170px;
							margin-top: 14px;
							margin-left: 10px;
							cursor: pointer;
							border-radius: 6px;
						}

						.avatar {
							width: 40px;
							height: 40px;
							border-radius: 6px;
						}

						.username {
							position: absolute;
							left: 45px;
							top: -5px;
							font-size: 13px;
							color: #b2b2b2;
						}

						.content {
							margin-top: 12px;
							box-sizing: border-box;
							display: inline-block;
							border-radius: 5px;
							line-height: 32px;
							background-color: #fff;
							color: #000;
							padding: 5px 10px;
							margin-left: 10px;
							/*border: 1px solid #ccc;*/
							min-width: 40px;
						}
					}
				}
			}

			.sendMessage {
				position: relative;
				flex: 1;
				background-color: #fff;
				padding-left: 10px;
				overflow-y: auto;
				// background: pink;
				.icon {
					height: 25px;
					padding-top: 6px;
					display: flex;

					.icon-smile,
					.icon-wenjianjia,
					.icon-jietu {
						font-size: 20px;
						padding: 0 6px;
						cursor: pointer;
					}

					.icon-jietu {
						font-size: 23px !important;
					}

					.emoji {
						position: absolute;
						display: flex;
						flex-wrap: wrap;
						width: 276px;
						height: 218px;
						overflow: auto;
						bottom: 159px;
						background-color: #fff;
						border: 1px solid #cccccc;
						outline: none;

						span {
							padding: 7px;
							cursor: pointer;
						}
					}
				}

				textarea {
					border: none;
					resize: none;
					outline: none;
					font-size: 15px;
					padding-left: 9px;
				}

				// .sendMessage {
				// 	position: absolute;
				// 	bottom: 10px;
				// 	right: 10px;
				// 	/*padding: 4px 10px;*/
				// 	background-color: #f5f5f5;
				// 	border: 1px solid #ccc;
				// }

			}
		}

		/*.join {*/
		/*  color: #333;*/
		/*  font-size: 13px;*/
		/*}*/
		/*.send {*/
		/*  background-color: #2ecc71;*/
		/*  color: #000;*/
		/*}*/
		/*.receive {*/
		/*  background-color: #fff;*/
		/*  color: #000;*/
		/*}*/
		/*.fade-enter-active,*/
		/*.fade-leave-active {*/
		/*  transition: opacity 0.5s;*/
		/*}*/
		/*.fade-enter,*/
		/*.fade-leave-to {*/
		/*  opacity: 0;*/
		/*}*/
	}
</style>
